<template>
  <div class="app-container">
    <el-table
    :data="list"
    border
    style="width: 100%;margin-top:10px;">
    <el-table-column
      prop="id"
      label="ID">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题">
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 表单弹窗 -->
  <el-dialog
    :visible.sync="dialogVisible">
    <add-service @close="serviceClose" :formId="formId" :key="changeKey"></add-service>
  </el-dialog>
  </div>
</template>

<script>
import { config } from '@/api/factory'
import addService from './common/addService.vue'
export default {
    components: { addService },
    data() {
        return {
            list: null,
            listLoading: false,
            dialogVisible:false,
            formId:0,
            changeKey:0,
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            config().then(res => {
                console.log(res)
                this.list = res.data
            })
        },
        serviceClose(data){
            this.dialogVisible = data
            this.fetchData()
        },
        edit(item){
            this.changeKey += 1
            this.formId = item.id
            this.dialogVisible = true
        }
    }
}
</script>
